<template>
	<view class="flex-col page">
		<!-- <uni-nav-bar title="" backgroundColor="white"></uni-nav-bar> -->
		<view class="search_wrapper" style="position: sticky;top: 0;z-index: 1;">
			<view class="search">
				<!-- <view class="flex-row">
				<text class="text" @click="opencity">{{ city||'正在获取定位...' }}</text>
				<u-icon class="content_col10" name="arrow-down-fill" color="black" size="14"></u-icon>
				<u--input confirm-type="search" @blur="confirm" @confirm="confirm" class="text_1" placeholder="搜索项目/达人" border="none" suffixIcon="search" fontSize=" 28rpx" suffixIconStyle="font-size: 25px;color: black"
				v-model="value"></u--input>
			</view> -->
				<view class="xuan">
					<text>选择性别：</text>
					<view class="xuan-box">
						<text :class="text==1?'text1':''" @click="clickX(1)">男</text>
						<text :class="text==2?'text1':''" @click="clickX(2)" style="margin-left: 40rpx;">女</text>
					</view>

				</view>
			</view>
		</view>
		<view class="flex-col section_1">
			<view class="flex-row group_1">
				<!-- <view class="flex-row">
					<image
						src="../../static/icons/dun.png"
						class="image_3" />
					<text class="text_2">优质服务</text>
				</view>
				<view class="flex-row group_3">
					<image
						src="../../static/icons/dun.png"
						class="image_3" />
					<text class="text_2">随叫随到</text>
				</view> -->
			</view>
		</view>
		<view class="flex-col list">
			<u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="110" style="margin-top: 30rpx;">
			</u-skeleton>

			<view class="no" v-if="total === 0">
				<zNo></zNo>
			</view>

			<view class="list-item justify-center" :key="i" v-for="(item, i) in dataList" style="flex-shrink:0;">
				<view class="left-section flex-col items-center" @click="henderBig(item.album)"
					:style="{'backgroundImage': `url(${item.avatar})`}">
					<image v-if="item.new" src="../../static/my/tnew.png" class="image_5" />
					<view class="flex-col items-center text-wrapper" v-if="item.appointment_time !== '休息中'">
						<text>可预约</text>
					</view>

					<view class="pos" v-if="item.appointment_time == '休息中'">
						休息中
					</view>
				</view>
				<view class="center-group flex-col">
					<view class="group_4 flex-row">
						<text class="text_5 text_6">{{ item.realname }}</text>
						<text class="text_6 text_5">{{item.id+1000}}</text>
						<view class="btn" @click="changeCollect(item.id,item.collect)">
							{{ item.collect != 0 ? '取关' : '关注' }}
						</view>



						<!-- <image
							src="../../static/my/auth.png"
							class="image_7" /> -->
					</view>
					<view class="box_del">
						<text>身高：{{item.height}}cm</text>
						<text>体重：{{item.weight}}kg</text>
						<text>职业：{{item.professional}}</text>
						<text>特长：{{item.specialty}}</text>
					</view>
					<!-- 	<view class="group_5 flex-row">
						<u-icon v-for="(sitem,sindex) in parseInt(item.praise)" :key="sindex" name="star-fill" size="12" color="rgba(243, 151, 53, 1)"></u-icon>
						<text class="text_7">好评{{ item.praise }}分</text>
					</view>
					<view class="group_6 flex-row">
						<view class="left-text-wrapper flex-col" v-if="item.label">
							<text class="text_9">{{ item.label }}</text>
						</view>
						<view class="right-text-wrapper flex-col items-center">
							<text>{{ item.practice }}年经验</text>
						</view>
					</view>
					<view class="group_7 flex-row">
						<image
							v-if="false"
							src=""
							class="image_13" />
						<text v-if="false" class="text_12 text_13">浅墨养生</text>
						<image
							src="../../static/my/pl.png"
							class="image_15" />
						<text class="text_14 text_15">{{ item.comment }}评论</text>
						<image
							src="../../static/my/dang.png"
							class="image_17" />
						<text class="text_16 text_17">{{ item.sales }}单</text>
					</view> -->
				</view>
				<view class="right-group flex-col">
					<view class="top-text-wrapper flex-col items-center">
						<text>{{ item.appointment_time === '休息中' ? '' : '可约' }}{{ item.appointment_time }}</text>
					</view>
					<text class="text_19">距离{{ item.distance }}km</text>
					<view class="bottom-text-wrapper flex-col items-center"
						:class="item.appointment_time == '休息中'? 'gayer':''" @click="addOrder(item)">
						<text>立即下单</text>
					</view>
				</view>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image :src="hender[0]" mode=""></image>
				</view>
			</view>
		</u-overlay>

		<u-popup :show="show1" @close="close" @open="open">
			<view class="popup">
				<view class="popup-t">
					<view class="top-l">
						<image :src="artist.avatar" mode=""></image>
					</view>
					<view class="top-r">
						<text class="t-text-1">{{artist.realname}} <text>{{artist.id+1000}}</text></text>
						<view class="top-b">
							<text class="t-text">身高：{{artist.height}}cm</text>
							<text class="t-text">体重：{{artist.weight}}kg</text>
							<text class="t-text">职业：{{artist.professional}}</text>

						</view>
					</view>
				</view>
				<view class="popup-b">
					<view class="popup-box" v-for="(item,index) in items">
						<view class="box-l">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="box-c">
							<view class="box-h">
								<text style="margin-right: 10rpx;">{{item.name}}</text>
								<u-icon name="clock" color="#999" size="12"></u-icon>
								<text style="font-size: 24rpx; color: #999;">{{item.duration}}分钟</text>
							</view>
							<text class="money" style="color: #fb6e59;">￥{{item.price}}</text>
						</view>
						<view class="box-b" @click="goConfirm(item.id,item.service_id)">
							<text>立即下单</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue'
	// 后台没有数据就引入xer.vue  ，后台接口给出数据就引入index.vue
	// import zNo from '@/components/z-no/index.vue'
	import zNo from '@/components/z-no/xer.vue'
	export default {
		data() {
			return {
				listbJVHRZ5E: [],
				latitude: '',
				longitude: '',
				value: '',
				dataList: [],
				total: null,
				loading: true,
				page: 1,
				city: "",
				local: 0,
				text: 1,
				show: false,
				show1: false,
				hender: '',
				artist: [],
				items: [],
				collect: "",
			};
		},
		components: {
			tmSkeleton,
			zNo
		},
		/* 	onReachBottom(){
				// if( this.total === this.dataList.length ){
				// 	return;
				// }
				this.page++;
				this.init();
			}, */

		onLoad(index) {
			this.text = uni.getStorageSync('index')
			console.log('999999', this.text);
			this.dataList = []
			this.getLat();
			/* if(this.productlList.length == 0){
				this.getLat();
			} */
		},

		methods: {
			changeCollect(id, collect) {
				uni.showModal({
					content: collect != 1 ? '是否确认关注？' : '是否确认取消关注？',
					success: (res) => {
						let {
							confirm
						} = res;
						if (confirm) {
							this.$http.post('api/collect/collect', {
								technician_id: id
							}).then(res => {
								this.init()
								uni.showToast({
									icon: 'success',
									title: collect != 1 ? '关注成功' : '取消成功'
								})

								/* collect == 1 ? collect = 0 : collect = 1; */
								uni.navigateBack();

							})
						}
					}
				})
			},
			henderBig(hender) {
				this.hender = hender
				this.show = true
			},


			getLat() {
				let _this = this
				uni.getLocation({
					altitude: false,
					geocode: true,
					type: 'gcj02',
					success: (res) => {
						console.log(res, "打印的res值获取city")
						_this.local = 1
						let {
							latitude,
							longitude,

						} = res;
						console.log("res", longitude);
						// address.longitude = longitude;
						// address.latitude = latitude;
						// address.longitude = this.longitude;
						// address.latitude = this.latitude;
						let wz = uni.getStorageSync('address_info')
						// if(!wz || wz.district != address.district || !_this.dataList.length){

						// uni.setStorageSync('address_info',address)
						/* _this.city = address.district ? address.district : address.city; */
						_this.latitude = latitude;
						_this.longitude = longitude;
						console.log(_this.longitude, "123")
						_this.init();
						// }
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			clickX(e) {
				this.text = e
				this.dataList = []
				this.init()
			},




			init() {
				let obj = {
					lat: this.latitude,
					lng: this.longitude,
					page: this.page,
					sex: this.text
				}
				if (this.value) {
					obj.realname = this.value
				}
				console.log(obj, "打印的obj")
				this.$http.post('api/technician/index', obj).then(res => {
					console.log(res, "dayinderes")
					let {
						list,
						total
					} = res;
					this.dataList.push(...list);
					this.dataList = [...this.dataList.filter(item => item.appointment_time != '休息中'), ...this
						.dataList.filter(item => item.appointment_time == '休息中')
					]
					this.total = total;
					console.log(this.dataList, "打印的dataList")
					this.loading = false;
				})
			},
			confirm() {
				this.page = 1;
				this.dataList = [];
				this.total = null;
				this.init();
			},
			opencity() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						let reg = /.+?(省|市|镇|自治区|自治州|县|区)/g;
						let {
							longitude,
							latitude,
							address
						} = res;
						this.longitude = longitude
						this.latitude = latitude;
						let arr = address.match(reg);
						this.city = arr[1];
						uni.setStorageSync('address_info', {
							address,
							longitude,
							latitude,
							city: this.city
						});
						this.confirm();
					}
				})
			},
			toPath(item) {
				if (item.appointment_time == '休息中') {
					uni.showToast({
						title: '该达人正在休息中',
						icon: 'none'
					})
					return
				}
				let url = `/bundle/pages/home/home?id=${item.id}`;
				uni.navigateTo({
					url,
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show1 = false
				// console.log('close');
			},
			addOrder(item) {
				if (item.appointment_time == '休息中') {
					uni.showToast({
						title: '该达人正在休息中',
						icon: 'none'
					})
					return
				}
				console.log(item);
				this.artist = item
				this.$http.post('api/index/tecspec', {
					tec_id: item.id
				}).then(res => {
					this.items = res.spec
					console.log(res.spec, '5555');
				})
				this.show1 = true
			},
			goConfirm(id, service_id) {
				let order_info = {
					spec_id: '',
					service_id: '',
					technician_id: ''
				}
				console.log(order_info, "errors")
				order_info.spec_id = id;
				order_info.service_id = service_id;
				order_info.technician_id = this.artist.id;
				uni.setStorageSync('order_info', order_info);
				uni.navigateTo({
					url: `/pages/confirm_order/confirm_order?id=${this.artist.id}`
				})
			}

		},
		onPullDownRefresh() {
			let _self = this
			setTimeout(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
				this.page = 1;
				this.dataList = [];
				this.total = null;
				this.init();
			}, 1000);
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 338rpx;
		background-color: #f8f8f8;
		height: 100%;
		width: 100%;

		.no {
			padding-top: 300rpx;
		}

		.search_wrapper {
			padding: 1rpx 32rpx 20rpx;
			background-color: white;

			.search {

				padding: 10rpx 24rpx;
				background-color: #f5f5f5;

				.xuan {
					width: 100%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 30rpx;

					.text1 {
						color: #31d081;
					}
				}

				.image {
					width: 44rpx;
					height: 44rpx;
				}

				.text {
					color: black;
					font-size: 28rpx;
					line-height: 50rpx;
					white-space: nowrap;
				}

				.text_1 {
					margin-left: 24rpx;
					color: black;
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}
		}

		.section_1 {
			padding: 0 32rpx 250rpx;
			background-color: #f5f5f5;



			.group_1 {
				margin-top: 24rpx;
				color: black;
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				.group_3 {
					margin-left: 54rpx;

					.image_4 {
						margin-bottom: 4rpx;
						width: 28rpx;
						height: 34rpx;
					}

					.text_3 {
						margin-left: 14rpx;
					}
				}

				.image_3 {
					width: 40rpx;
					height: 40rpx;
				}

				.text_2 {
					margin-left: 8rpx;
				}
			}
		}

		.list {
			margin-top: -246rpx;
			padding: 0 32rpx;
			position: relative;

			.list-item {
				padding: 34rpx 0 30rpx;
				padding-left: 10rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx;

				&:not(:first-of-type) {
					margin-bottom: 25rpx;
				}

				.left-section {
					padding-top: 140rpx;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					line-height: 34rpx;
					white-space: nowrap;
					border-radius: 50%;

					background-position: 0px 0px;
					background-size: cover;
					background-repeat: no-repeat;
					width: 176rpx;
					height: 176rpx;
					position: relative;

					.image_5 {
						width: 80rpx;
						height: 32rpx;
						position: absolute;
						right: 0;
						top: 0;
					}

					.text-wrapper {
						padding-bottom: 4rpx;
						background-color: rgb(243, 151, 53);
						border-radius: 18rpx;
						width: 128rpx;
						position: relative;

					}
				}

				.center-group {
					margin-left: 16rpx;
					flex: 1;

					.group_4 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;

						.text_5 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
							white-space: nowrap;
						}

						.text_6 {
							color: initial;
							font-size: initial;
							font-weight: initial;
							line-height: initial;
							white-space: initial;
						}

						.image_7 {
							margin: 4rpx 0 4rpx 8rpx;
							width: 90rpx;
							height: 36rpx;
						}
					}

					.group_5 {
						margin-top: 6rpx;
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 28rpx;
						white-space: nowrap;

						.image_9 {
							width: 80rpx;
							height: 24rpx;
						}

						.image_11 {
							margin-left: 4rpx;
							width: 52rpx;
							height: 24rpx;
						}

						.text_7 {
							margin-left: 8rpx;
						}
					}

					.group_6 {
						margin-top: 14rpx;
						color: rgb(243, 151, 53);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;

						.left-text-wrapper {
							padding: 2rpx 0 4rpx;
							background-color: rgba(243, 151, 53, 0.16);
							border-radius: 8rpx;
							height: 40rpx;

							.text_9 {
								margin-left: 12rpx;
								margin-right: 10rpx;
							}
						}

						.right-text-wrapper {
							margin-left: 8rpx;
							padding: 2rpx 10rpx 4rpx;
							background-color: rgba(243, 151, 53, 0.16);
							border-radius: 8rpx;
							height: 40rpx;
						}
					}

					.group_7 {
						margin-top: 16rpx;
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 28rpx;
						white-space: nowrap;

						.image_13 {
							width: 24rpx;
							height: 24rpx;
						}

						.text_12 {
							margin-left: 4rpx;
						}

						.text_13 {
							margin-left: initial;
						}

						.image_15 {
							margin-left: 12rpx;
							width: 24rpx;
							height: 24rpx;
						}

						.text_14 {
							margin-left: 4rpx;
						}

						.text_15 {
							margin-left: initial;
						}

						.image_17 {
							margin-left: 12rpx;
							width: 24rpx;
							height: 24rpx;
						}

						.text_16 {
							margin-left: 6rpx;
						}

						.text_17 {
							margin-left: initial;
						}
					}
				}

				.right-group {
					margin-left: 10rpx;
					margin-right: 24rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.top-text-wrapper {
						padding: 4rpx 10rpx 2rpx;
						color: rgb(24, 181, 103);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;
						background-image: linear-gradient(111.2deg,
								rgba(53, 219, 160, 0.12) 0%,
								rgba(53, 219, 160, 0.12) -13.77%,
								rgba(24, 181, 103, 0.12) 111.69%,
								rgba(24, 181, 103, 0.12) 100%);
						border-radius: 6rpx;
					}

					.opacity-0 {
						opacity: 0;
					}

					.text_19 {
						margin-top: 10rpx;
						align-self: flex-end;
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 28rpx;
						white-space: nowrap;
					}

					.bottom-text-wrapper {
						align-self: flex-end;
						margin-left: 8rpx;
						/* margin-top: 60rpx; */
						padding: 8rpx 0 6rpx;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						/* line-height: 34rpx; */
						white-space: nowrap;
						/* background-image: linear-gradient(116.3deg,
								rgb(53, 219, 160) 0%,
								rgb(53, 219, 160) -13.77%,
								rgb(24, 181, 103) 111.69%,
								rgb(24, 181, 103) 100%); */
						background-color: #31d081;
						border-radius: 24rpx;
						width: 140rpx;
						height: 60rpx;
					}

					.gayer {
						background: rgba(228, 228, 228, 1);
					}
				}
			}
		}
	}

	.pos {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .36);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 28rpx;
		border-radius: 50%;
	}

	.box_del {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 100%;
		height: 60%;
		background-color: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.popup {
		width: 100%;
		height: 60vh;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f7f7f7;

		.popup-t {
			width: 100%;
			height: 150rpx;
			border-radius: 20rpx;
			border: 1px solid #31d081;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			background-color: #fff;

			.top-l {
				width: 17%;
				height: 100%;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.top-r {
				width: 80%;
				height: 100%;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.t-text-1 {
					font-size: 26rpx;
					font-weight: 700;

				}

				.top-b {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

			}
		}

		.popup-b {
			width: 100%;
			height: 600rpx;
			/* background-color: #31d081; */
			margin-top: 20rpx;
			overflow: scroll;

			.popup-box {
				width: 100%;
				height: 220rpx;
				padding: 20rpx;
				background-color: #fff;
				margin-top: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 20rpx;

				.box-l {
					width: 32%;
					height: 100%;
					border-radius: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.box-c {
					width: 40%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.box-h {
						font-size: 26rpx;
						display: flex;
					}
				}

				.box-b {
					width: 20%;
					height: 55rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #31d081;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 30rpx;
				}
			}
		}
	}

	.btn {
		width: 80rpx;
		height: 40rpx;
		font-size: 22rpx;
		background: linear-gradient(143deg, #35DBA0 0%, #31d081 100%);
		border-radius: 48rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}
</style>